<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>13-box-shadow</title>
    <style>
        body {
            background-color: #f5f5f5;
            padding-left: 100px;
            padding-top: 100px;
        }
        
        div {
            width: 200px;
            height: 300px;
            background-color: #fff;
            /* 阴影向右偏移10px，向下偏移20px */
            /*box-shadow: 10px 20px #f00;*/

            /*box-shadow: 0 0 30px 15px #f00;*/

            /* 让所有可动画属性的修改在0.25s内通过动画完成 */
            transition: all .25s;

            /* 让width属性的修改在1s内通过动画完成 */
            /*transition: width 1s;*/
        }

        div:hover {
            box-shadow: 0 15px 30px rgba(0, 0, 0, .1),
                        0 15px 30px rgba(255, 0, 0, .5),
                        0 15px 30px rgba(255, 255, 0, .6);
            /*width: 100px;
            height: 100px;
            background-color: #0f0;*/
        }
    </style>
</head>
<body>

<div></div>

</body>
</html>